<template>
    <div>
        <DetailBanner :imgs="imgs" :name="bannerName" :Img="bannerImg"></DetailBanner>
        <DetailHeader></DetailHeader>
        <div class="content">
            <DetailList :List="List"></DetailList>
        </div>
    </div>
</template>
<script>
import DetailBanner from "./components/Banner"
import DetailHeader from "./components/Header"
import DetailList from "./components/List"
import axios from "axios"
export default {
    name:"Deatil",
    components:{
        DetailBanner,
        DetailHeader,
        DetailList
    },
    data(){
       return{
            List:[],
            imgs:[],
            bannerImg:'',
            bannerName:''
       }
    },
    methods:{
        getDetailInfo(){
            axios.get('/api/detail.json')
            .then(this.getDetailInfoSucc)
            .catch(function(e){
                console.log(e)
            })
        },
        getDetailInfoSucc(res){
            console.log(res)
            res=res.data
            if(res.ret&&res.data){
                this.List=res.data.categoryList
                this.imgs=res.data.gallaryImgs
                this.bannerImg=res.data.bannerImg
                this.bannerName=res.data.sightName
            }
        }
    },
    mounted(){
        this.getDetailInfo()
    }
}
</script>

<style lang="stylus" scoped>
    .content
        height: 50rem
    
</style>
